import { withPixiApp, Container } from '@inlet/react-pixi'
import React from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import { canvas as canvasDuck, projectLabelView as projectDuck } from 'ducks'
import ImageSprite from '../imageSprite'
import PanContainer from './panContainer'
import LabelView from '../labelContainer'
import EditView from '../editContainer'
import EditPointView from '../editPointContainer'
import TouchLayer from '../touchLayer'
import PrepareLayer from '../preparePointsContainer'
import GuideLines from '../guideLines'

const RootContainerView = ({
  isPanActive,
  isEditPolygonHole,
  actionSetCoordinate,
  coodinate,
  imageScale,
  imageInfo,
  isEditingLabel,
}) => (
  <PanContainer
    cursor={isPanActive ? 'move' : 'crosshair'}
    pan={isPanActive}
    interactive
    setCoordinate={actionSetCoordinate}
    x={coodinate.x}
    y={coodinate.y}
  >
    <ImageSprite scale={imageScale} />
    <Container
      x={-0.5 * imageInfo.width * imageScale}
      y={-0.5 * imageInfo.height * imageScale}
      width={imageInfo.width}
      height={imageInfo.height}
      scale={[imageScale]}
    >
      <LabelView scale={imageScale} />
      {isEditingLabel && <EditView scale={imageScale} />}
      <TouchLayer
        width={imageInfo.width}
        height={imageInfo.height}
        active={!isEditPolygonHole && !isPanActive}
      />
      {isEditingLabel && <EditPointView scale={imageScale} />}
      <GuideLines scale={imageScale} width={imageInfo.width} height={imageInfo.height} />
      <PrepareLayer scale={imageScale} />
    </Container>
    {/*
        <Container
          x={-0.5 * image.width * image_scale}
          y={-0.5 * image.height * image_scale}
          width={image.width}
          height={image.height}
          scale={[image_scale]}
        >
          <Lables_view scale={image_scale} />
          <Edit_label_view scale={image_scale} />
            <Edit_label_view scale={image_scale}/>
            <Show_lable_view scale={image_scale}/>
            <Tough_layer
            width={width}
            height={height}
            on_click={active_brush === 'pan' ? undefined : paint_point}
            />
          {
            is_layer_active === true &&
            <Tough_layer
              width={image.width}
              height={image.height}
              on_click={paint_point}
            />
          }
          <Edit_point_view scale={image_scale} />
        </Container>
        */}
  </PanContainer>
)

RootContainerView.propTypes = {
  isPanActive: PropTypes.bool.isRequired,
  isEditPolygonHole: PropTypes.bool.isRequired,
  actionSetCoordinate: PropTypes.func.isRequired,
  coodinate: PropTypes.object.isRequired,
  imageScale: PropTypes.number.isRequired,
  imageInfo: PropTypes.object.isRequired,
}

const mapStateToProps = state => ({
  isPanActive: canvasDuck.selectors.isPanActive(state),
  isEditPolygonHole: projectDuck.selectors.isEditPolygonHole(state),
  coodinate: canvasDuck.selectors.coodinate(state),
  imageScale: canvasDuck.selectors.imageScale(state),
  imageInfo: projectDuck.selectors.imageInfo(state),
  isEditingLabel: projectDuck.selectors.isEditingLabel(state),
})

const mapDispatchToProps = {
  actionSetCoordinate: canvasDuck.creators.actionSetCoordinate,
}

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(RootContainerView)
